<template>
	<view>
		<view class="header">
			<view class="font48 colorfont fontWeight">
				圆通速递
			</view>
			<view class="uni-inline-item" style="justify-content: space-between;">
				<view>
					<text class="font28 color999">运单号:</text>
					<text class="font28 colorfont">1231223</text>
				</view>
				<text class="coloryellow font28">派送中</text>
			</view>
		</view>
		<view class="goods" style="margin: 20upx 0;">
			<image src="../../static/emptyCart.jpg" mode=""></image>
			<view class="goods-info">
				<view class="ttile">
					【狮子王联名】乐町可爱连帽短外套...狮子王联名】乐町可爱连帽短外套...
				</view>
				<view class="font24" style="color: #8E8E93;">￥600</view>
			</view>
		</view>
		<view class="uni-timeline" style="padding: 36upx;background-color: #fff;margin-top: 20rpx;">
			<view class="uni-timeline-item uni-timeline-first-item">
				<view class="uni-timeline-item-divider"></view>
				<view class="uni-timeline-item-content">
					<view class="font28 colorfont">	
						uni-app 立项
					</view>
					<view class="datetime">
						2018.05
					</view>
				</view>
			</view>
			<view class="uni-timeline-item">
				<view class="uni-timeline-item-divider"></view>
				<view class="uni-timeline-item-content">
					<view class="font28 colorfont">uni-app 正式发布，使用vue技术，开发一次，App、小程序、H5多端同时生成</view>
					<view class="datetime">2018.07</view>
				</view>
			</view> 
			<view class="uni-timeline-item uni-timeline-last-item">
				<view class="uni-timeline-item-divider"></view>
				<view class="uni-timeline-item-content">
					<view class="font28 colorfont">uni-app 支持使用 npm 安装依赖，支持微信小程序自定义组件</view>
					<view class="datetime">2018.10</view>
				</view>   
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				
			}
		},
		
		onLoad(option) {
			this.optins = option;
			this.loadDetail(this, option);
		},
		
		methods: {
			/**
			 * @param {Object} 物流详情数据
			 */
			loadDetail(that, option) {
				that.$http.request({
						method: 'GET', // 请求方法必须大写
						url: that.$requestApi.orderDetail + "/" + option.shopId + "/" + option.orderNumber,
						data: {}
					})
					.then(result => {
						let _data = result.data;
						if (_data.code === 200) {
							 that.$nextTick(() => {
							  
							that.orderDetailData = _data.result;
							var orderSubmitTime = _data.result.orderSubmitTime;
							that.orderSubmitTime = js_date_time(orderSubmitTime);
							var endTime = that.minutesTest(js_date_time(orderSubmitTime));
							var nowTime = that.currentTime();
							var total_micro_second = endTime - nowTime;
							if (total_micro_second <= 0) {
								that.clock = '00:00:00';
								return;
							} else {
								that.countdown(total_micro_second );
							}
							})
						}
					})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background:#F5F5FA;
	}
	.header{
		padding: 60rpx 36rpx 36rpx;
		width: 100%;
		background-color: #fff;
	}
	.uni-timeline-item .uni-timeline-item-divider {
		width: 18upx;
		height: 18upx;
		background-color: #D1D1D6;
	}
	.uni-timeline-item-divider::before,
	.uni-timeline-item-divider::after {
		left: 8upx;
		background-color: rgba(245,245,250,1);
	}
	
	/* 自定义节点颜色 */
	.uni-timeline-first-item .uni-timeline-item-divider{
		background-color: #FF5E00;
	}
	.datetime{
		color:#8E8E93
	}
	.goods{
		width: 100%;
		padding:36upx;
		border-radius: 20upx;
		background-color: #fff;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		    -ms-flex-direction: row;
		        flex-direction: row;
		
		image{
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			margin-right: 20upx;
		}
		.goods-info{
			height: 120rpx;
			display: -webkit-box;
			display: -webkit-flex;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			    -ms-flex: 1;
			        flex: 1;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			-webkit-flex-direction: column;
			    -ms-flex-direction: column;
			        flex-direction: column;
			-webkit-box-pack: justify;
			-webkit-justify-content: space-between;
			    -ms-flex-pack: justify;
			        justify-content: space-between;
			-webkit-box-align: start;
			-webkit-align-items: flex-start;
			    -ms-flex-align: start;
			        align-items: flex-start;
			overflow: hidden;
			// flex-wrap: wrap;
			flex-direction: column;
			.ttile{
				overflow: hidden;
				white-space: nowrap;
				-o-text-overflow: ellipsis;
				text-overflow: ellipsis;
				font-size: 28upx;
				width: 100%;
				color:#0B0E11;
			}
		}
	}
</style>
